import React, { memo, useEffect, useState } from 'react'
import { useSelector, shallowEqual } from "react-redux"
import { useHistory } from "react-router-dom"
import { Menu } from 'antd';

import { menulist, handleMenu } from '@/utils/menu'

const { SubMenu } = Menu;

export default memo(function MenuList(props) {
    const { userdata } = useSelector(state => ({
        userdata: state.userdata
    }), shallowEqual)
    const [menuArr, setmenuArr] = useState([])
    const [path, setPath] = useState('/home/workform')
    
    const route = useHistory()
    useEffect(() => {
        if (!userdata) {
            return route.push("/login")
        }

        let arr = userdata.user_jurisdiction_routerlist

        let menulist = handleMenu(arr)
        sessionStorage.setItem("menulist", JSON.stringify(menulist))
        setmenuArr(menulist)

        // 打开项
        const path = sessionStorage.getItem("menuPath") || ""
        if (path) {
            setPath(path)
            // 默认打开index
            getIndex(path)
        }
    }, [])

    const getIndex = (path) => {
        menulist.forEach((item, index) => {
            item.children.forEach((item1) => {
                if (path === item1.path) {
                    setOpenKeys(index+'')
                }
            })
        })
    }

    // 菜单回调函数
    const handleClick = e => {
        props.getBreadTitle(e.key)
        route.push(e.key)

    };

    const [openKeys, setOpenKeys] = React.useState(['0']);
    let rootSubmenuKeys = []
    menulist.forEach((item, index) => {
        rootSubmenuKeys.push(index + "")
    })

    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    }

    const handleRouter = (path) => {
        sessionStorage.setItem("menuPath", path)
    }

    return (
        <div>
            {
                menuArr.length > 0 &&
                <Menu
                    onClick={handleClick}
                    defaultSelectedKeys={[path]}
                    // selectedKeys={[path]}      如果使用路由来获取,使用这个，受控组件
                    defaultOpenKeys={[openKeys]}
                
                    mode="inline"
                    inlineCollapsed={props.collapsed}
                    openKeys={openKeys}
                    onOpenChange={onOpenChange}
                >
                    {
                        menuArr.map((item, index) => {
                            return <SubMenu key={index} icon={item.icon} title={item.title}>
                                {
                                    item.children.map(item1 => {
                                        return (
                                            <Menu.Item onClick={() => { handleRouter(item1.path) }} icon={item1.icon} key={item1.path}>{item1.title}</Menu.Item>
                                        )
                                    })
                                }
                            </SubMenu>
                        })
                    }
                </Menu>
            }

        </div>
    )
})
